<template>
    <div>
        <div id="main" style="height: 450px; width: 800px;"></div>
    </div>
</template>
<script>
import * as trainerAnalyze from '@/api/trainerAnalyze'
import echarts from 'echarts';

export default {
    data() {
        return {
            info:[]
        }

    },
    mounted() {
        
        this.getTrainerAnalysisDetail()
        
    },
    methods: {
        getdata() {

        },

        getEchart() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: ''
                },
                // legend: {
                //     // data: ['Allocated Budget']
                // },
                color: '#1890ff',
                radar: {
                    // shape: 'circle',
                    indicator: [
                        // { name: '年度预测' + '(19%)', max: 6500, color: '#000' },
                        // { name: '利润因子' + '(27%)', max: 16000, color: '#000' },
                        // { name: '盈利偏移占比' + '(8%)', max: 30000, color: '#000' },
                        // { name: '最大单笔盈利' + '(18888)', max: 38000, color: '#000' },
                        // { name: '交易胜率' + '(80%)', max: 52000, color: '#000' },

                        // { name: `年度预测(${this.info[0]}%)`, color: '#000' },
                        // { name: `利润因子(${this.info[1]}%)`,  color: '#000' },
                        // { name: `盈利偏移占比(${this.info[2]}%)`,  color: '#000' },
                        // { name: `最大单笔盈利(${this.info[3]})`,  color: '#000' },
                        // { name: `交易胜率(${this.info[4]})%`,  color: '#000' },

                        { name: `年度预测(${this.info[0]|| 0}%)`, color: '#000' },
                        { name: `利润因子(${this.info[4]|| 0}%)`,  color: '#000' },
                        { name: `盈利偏移占比(${this.info[3]|| 0}%)`,  color: '#000' },
                        { name: `最大单笔盈利(${this.info[2]|| 0}%)`,  color: '#000' },
                        { name: `交易胜率(${this.info[1]|| 0})%`,  color: '#000' },


                    ]
                },
                series: [
                    {
                        name: '盈利能力',
                        type: 'radar',
                        // data: [
                        //     {
                        //         value: [68880, 388800, 2000, 300, 40000],
                        //         name: 'Allocated Budget'
                        //     }
                        // ]
                        data:[
                            {
                                value:this.info
                            }
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);

            console.log('盈利能力：',this.info)
        },

        getTrainerAnalysisDetail() {

            let data = {
                uid: this.$route.query.uid,
                traderAccountId: this.$route.query.traderAccountId
            }

            trainerAnalyze.getTraderAnalysisInfo(data).then((res) => {
                console.log('训练员分析详情->利润：', res.profitCapacity)
                this.info = res.profitCapacity;

                // 渲染echart
                this.getEchart();

            }).catch((err) => {
                console.log(err)
            })
        },
    }
}
</script>
<style lang="scss" scoped></style>